<template>
  <div>
    <a-row style="display:flex;height: 100%;width: 100%;overflow:hidden;">
      <a-col class="left">
        <div class="leftShow aidCenter">
          <div class="aidCenterPic">
            <img src="../../../static/images/aid.png">{{belongDpname}}
          </div>
          <span>
            <em class="bdCode">{{bedCode}}</em>床
          </span>
        </div>
        <div class="leftShow currentDate">
          <div class="currentDatePic aidCenterPic">
            <img src="../../../static/images/currentdate.png">当前系统日期
          </div>

          <div class="date">
            <div>
              <span class="ymd"><em>{{timeObj.year}}</em>年
                <em>{{timeObj.month}}</em>月
                <em>{{timeObj.day}}</em>日</span>
            </div>
            <div>
              <span class="hms"><em>{{timeObj.hours}}</em>时
                <em>{{timeObj.minutes}}</em>分
                <!-- <em>{{Second}}</em>秒 -->
                </span>
            </div>
          </div>
          <!-- <div class="dateLayout">
            <p>
              <em>{{Year}}</em>年
              <em>{{Month}}</em>月
              <em>{{Day}}</em>日
            </p>
            <p class="hms">
              <em>{{Hours}}</em>时
              <em>{{Mininte}}</em>分
              <em>{{Second}}</em>秒
            </p>
          </div> -->
        </div>
      </a-col>
      <a-col class="right">
        <div class="rightShow">
          <div class="totalCount"><img src="../../../static/images/tips.png"/>总计：{{totalCount}}元</div>
          <div style="padding:0.2rem 0 0.2rem 0">
            <img src="../../../static/images/titleSign.png">
            <span class="titleSign" style="padding-left:0.16rem;color:#1a1a1a;">每日清单</span>
          </div>
          <div class="titleContent">
            <div class="datatips">此数据仅供参考，具体金额以出院结算处为准</div>
            <v-Table :datasource="dailyList"></v-Table>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Table from './Table'
import urls from '../../common.js'
import {mapState} from 'vuex'

export default {
  name: 'DailyList',
  data () {
    return {
      timeObj: {},
      bedCode: '',
      dailyList: [],
      totalCount: 0
    }
  },
  methods: {
    callback (key) {},
    initData: function () {
      var that = this
      if (this.bedNo) {
        this.$http
          .get(urls.painbilldetail + '/' + this.bedNo, { async: false })
          .then(result => {
            if (result.body.code === '200') {
              for (let i = 0; i < result.body.data.list.length; i++) {
                result.body.data.list[i].key = Math.random()
              }
              that.bedCode = result.body.data.bed_no
              that.dailyList = result.body.data.list
              that.totalCount = result.body.data.totalAmount
            }
          })
      }
    }
  },
  components: {
    'v-Table': Table
  },
  created: function () {
    this.initData()
    this.timeObj = this.dateObj
  },
  computed: {
    ...mapState({
      bedNo: 'bedNo',
      belongDpname: 'belongDpname'
    })
  }
}
</script>

<style lang="stylus" scoped>
.titleContent{
  overflow:hidden;
}
.left {
  // position: initial;
  width: 4.92rem;
}

.right {
  // position: absolute;
  // height: 100%;
  padding-left: 0.2rem;
  background: #fff;
  background-clip: content-box;
  flex :1;
  overflow: hidden;
}

.leftShow {
  height: 4.2rem;
}

.aidCenter {
  background: url('../../../static/images/aidbg.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  width: 4.92rem;
}

.currentDate {
  background: url('../../../static/images/datebg.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 0.1rem;
  width: 4.92rem;
  position: relative;
}

.aidCenter span {
  display: inherit;
  position: absolute;
  top:50%;
  text-align: center;
  width: 100%;
  color: #fff;
  transform: translateY(-50%);
  font-size: 0.6rem;
}

.aidCenter .bdCode {
  font-size: 1.2rem;
}

.aidCenter .bdNum {
  font-size: 1.5rem;
}

.currentDate .hms {
  padding: 0;
}

.rightShow {
  padding: 0 0.22rem;
  height: 100%;
  overflow: hidden;
  .totalCount{
    background:#d8f0ed;
    height:0.4rem;
    line-height:0.4rem;
    font-size:0.2rem;
    color:#27ae9e;
    margin-top: 0.2rem;
    border-radius: 0.1rem;
    img{
      height:0.22rem;
      width:0.22rem;
      margin-left: 0.24rem;
      margin-right: 0.1rem;
      vertical-align: sub;
    }
  }
  // box-shadow: 0px 0.11rem 0.24rem 0px rgba(127,135,143,0.1);
}

.titleSign {
  // padding: 0.34rem 0 0.54rem 0.16rem;
  // font-size: 0.28rem;
  // color: #1a1a1a;
  // display: inline-block;
}

.aidCenterPic {
  font-size: 0.3rem;
  color: #fff;
  margin-left: 0.32rem;
  padding-top: 0.3rem;
}

.aidCenterPic img {
  width: 0.38rem;
  height: 0.34rem;
  vertical-align: sub;
  margin-right: 0.2rem;
}

.currentDatePic {
  font-size: 0.3rem;
  color: #fff;
  margin-left: 0.32rem;
  padding-top: 0.3rem;
}

.currentDate p {
  display: inherit;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 0.4rem;
  margin-bottom: 0.32rem;
}

.dateLayout {
  top: 1.2rem;
  position: relative;
}

.rightShow img {
  width: 0.04rem;
  height: 0.26rem;
  vertical-align: -0.03rem;
}

.date{
  position: absolute;
  text-align: center;
  width: 100%;
  height: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
}
.date span{
  display: inline-flex;
  font-size: .4rem;
  line-height: .55rem;
  color: #fff;
}
.datatips{
  text-align: right;
  color: #000;
  font-weight: 600;
  line-height: 50px;
}
</style>
